extends ../layout

block content
  .pb-2.mt-2.mb-4.border-bottom
    h2
      i.fab.fa-cc-stripe.fa-sm
      | Stripe API

  .btn-group.d-flex(role='group')
    a.btn.btn-primary(href='https://stripe.com/docs/tutorials/checkout').w-100
      i.fas.fa-home.fa-sm
      | Stripe Checkout
    a.btn.btn-primary(href='https://stripe.com/docs/api', target='_blank').w-100
      i.fas.fa-code.fa-sm
      | API Reference
    a.btn.btn-primary(href='https://manage.stripe.com/account/apikeys', target='_blank').w-100
      i.fas.fa-cog.fa-sm
      | Get API Keys

  br

  form(method='POST')
    input(type='hidden', name='_csrf', value=_csrf)
    script(
    src='https://checkout.stripe.com/checkout.js',
    class='stripe-button',
    data-key=publishableKey,
    data-image='https://static.tumblr.com/nljhkjv/z0Jlpk23i/logo',
    data-name='Hackathon Starter',
    data-description='Caramel Macchiato ($3.95)',
    data-amount='395')

  h3
    i.far.fa-credit-card.fa-sm
    | Test Cards
  p In test mode, you can use these test cards to simulate a successful transaction:

  table.table.table-striped.table-bordered.table-sm
    thead
      tr
        th Number
        th Card type
      tbody
        tr
          td 4242 4242 4242 4242
          td Visa
        tr
          td 4012 8888 8888 1881
          td Visa
        tr
          td 5555 5555 5555 4444
          td MasterCard
        tr
          td 5105 1051 0510 5100
          td MasterCard
        tr
          td 3782 822463 10005
          td American Express
        tr
          td 3714 496353 98431
          td American Express
        tr
          td 6011 1111 1111 1117
          td Discover
        tr
          td 6011 0009 9013 9424
          td Discover
        tr
          td 3056 9309 0259 04
          td Diners Club
        tr
          td 3852 0000 0232 37
          td Diners Club
        tr
          td 3530 1113 3330 0000
          td JCB
        tr
          td 3566 0020 2036 0505
          td JCB

  .card.text-white.bg-primary
    .card-header Stripe Successful Charge Example
    .card-body.text-dark.bg-white
      p This is the response you will get when customer's card has been charged successfully.
        | You could use some of the data below for logging purposes.
      pre.card.bg-light.
        { id: 'ch_103qzW2eZvKYlo2CiYcKs6Sw',
          object: 'charge',
          created: 1397510564,
          livemode: false,
          paid: true,
          amount: 395,
          currency: 'usd',
          refunded: false,
          card:
            { id: 'card_103qzW2eZvKYlo2CJ2Ss4kwS',
              object: 'card',
              last4: '4242',
              type: 'Visa',
              exp_month: 11,
              exp_year: 2015,
              fingerprint: 'Xt5EWLLDS7FJjR1c',
              customer: null,
              country: 'US',
              name: 'sahat@me.com',
              address_line1: null,
              address_line2: null,
              address_city: null,
              address_state: null,
              address_zip: null,
              address_country: null,
              cvc_check: 'pass',
              address_line1_check: null,
              address_zip_check: null },
          captured: true,
          refunds: [],
          balance_transaction: 'txn_103qzW2eZvKYlo2CNEcJV8SN',
          failure_message: null,
          failure_code: null,
          amount_refunded: 0,
          customer: null,
          invoice: null,
          description: 'sahat@me.com',
          dispute: null,
          metadata: {},
          statement_description: null }